<template>
  <el-card :body-style="{ padding: '12px'}" class="notice-item" :class="{ 'notice-item-read': isRead }" shadow="never">
    <div class="theme"> <i class="el-icon-info" /> Info</div>
    <div class="title" v-if="detail.status === '400'">PDF Download Failed</div>
    <div class="title" v-if="detail.status === '200'">PDF Download Succeeded</div>
    <div class="title" v-if="!detail.status">PDF Downloading</div>
    <div class="notice-item-content">
      <template v-if="!detail.status">
        Your dashboard {{detail.resourceName}} PDF is being generated
      </template>
      <template v-else-if="detail.status === '200'">
        Your Dashboard {{detail.resourceName}} PDF has been generated, <a :href="baseUrl+detail.filePath" style="color: blue">click</a> to download
      </template>
      <template v-else-if="detail.status === '400'">
        Your dashboard {{detail.resourceName}} export failed.
      </template>
    </div>
    <invented-progress style="margin-top: 5px" :detail="detail" v-if="!detail.status"></invented-progress>
    <div class="time">{{ (detail.updateDate || new Date()) | transformTimeZone}}</div>
  </el-card>
</template>

<script>
import inventedProgress from "@/views/navBarComponent/navbar-notice/invented-progress.vue";
export default {
  name: "notice-item",
  components: {
    inventedProgress
  },
  props: {
    detail: {},
  },
  data () {
    return {
      isRead: false,
      baseUrl: window.location.host === 'app.maibozhineng.com' ? 'https://bizoss.mspbots.ai/snapshot/' : 'https://intoss.mspbots.ai/snapshot/'
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
.notice-item {
  cursor: pointer;
  line-height: 20px;
  margin-bottom: 8px;
  .theme {
    font-size: 12px;
    color: #65DAD2;
    line-height: 16px;
    margin-bottom: 7px;
  }
  .title {
    font-weight: bold;
  }
  .notice-item-content {
    color: #000000E5;
    word-break: keep-all;
    text-align: left;
  }
  .time {
    font-size: 12px;
    color: #00000072;
    line-height: 16px;
    margin-top: 4px;
  }
}
.notice-item:hover {
  background: #00000005;
}

.notice-item-read {
  .title {
    color: #0000005B;
  }
  .content {
    color: #0000005B;
  }
  .time {
    color: #0000005B;
  }
}
</style>